<template>
  <div class="project_main_body flex">
    <TaskHeader />
    <template v-if="align == 'justify'">
      <div class="tasks" v-if="true">
        <!-- 当前任务 -->
        <div class="tasks__title">
          当前任务
        </div>
        <Task v-for="item in tasks!.current" :key="item.id" :item="item" />
        <!-- 未开始任务 -->
        <div class="tasks__title">
          未开始任务
        </div>
        <Task v-for="item in tasks!.begin" :key="item.id" :item="item" />
      </div>
      <Empty v-else />
    </template>
    <template v-if="align == 'top'">
      <h2>top</h2>
    </template>
    <template v-if="align == 'center'">
      <h2>center</h2>
    </template>

  </div>
</template>

<script setup lang="ts">
import TaskHeader from '@/components/task/header.vue';
import Task from '@/components/task/index.vue';
import Empty from '@/components/task/empty.vue';
import { provide, ref, inject, Ref } from 'vue';
import { ITask } from '@/types/project';
type TAlign = "center" | "justify" | "top";
const align = ref<TAlign>('justify')
const tasks = inject<Ref<{ current: ITask[], begin: ITask[] }>>("tasks")
provide("align", align)




</script>

<style lang="scss" scoped>
.project_main_body {
  overflow: hidden;
  width: 100%;
  flex-direction: column;

  .tasks {
    height: 950px;
    overflow: scroll;
    // background-color: red;
    // flex: 1;

    &::-webkit-scrollbar {
      display: none;
    }

    &__title {
      background-color: #E6EDF5;
      margin: 15px 0;
      padding: 8px 0;
      border-radius: 10px;
      font-weight: bold;
      text-align: center;
    }
  }
}

.a {
  height: 200px;
}
</style>
